import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import {
  NavBar,
  Icon,
  List,
  InputItem,
  Picker,
  TextareaItem,
  ImagePicker,
  SearchBar,
  Button,
  WhiteSpace,
  Flex,
  WingBlank,
  Toast,
} from "antd-mobile";

import "./index.scss";

import { getLocalPosition } from "../../utils/cacheUtils";
import { get, post } from "../../utils/Axios";
import axios from "axios";

// 房屋类型
const roomTypeData = [
  [
    { label: "一室", value: "ROOM|d4a692e4-a177-37fd" },
    { label: "二室", value: "ROOM|d1a00384-5801-d5cd" },
    { label: "三室", value: "ROOM|20903ae0-c7bc-f2e2" },
    { label: "四室", value: "ROOM|ce2a5daa-811d-2f49" },
    { label: "四室+", value: "ROOM|2731c38c-5b19-ff7f" },
  ],
];
// 朝向：
const orientedData = [
  [
    { label: "东", value: "ORIEN|141b98bf-1ad0-11e3" },
    { label: "西", value: "ORIEN|103fb3aa-e8b4-de0e" },
    { label: "南", value: "ORIEN|61e99445-e95e-7f37" },
    { label: "北", value: "ORIEN|caa6f80b-b764-c2df" },
    { label: "东南", value: "ORIEN|dfb1b36b-e0d1-0977" },
    { label: "东北", value: "ORIEN|67ac2205-7e0f-c057" },
    { label: "西南", value: "ORIEN|2354e89e-3918-9cef" },
    { label: "西北", value: "ORIEN|80795f1a-e32f-feb9" },
  ],
];
// 图片信息
const data = [];

// 楼层信息
const floorData = [
  [
    { label: "高楼层", value: "FLOOR|1" },
    { label: "中楼层", value: "FLOOR|2" },
    { label: "低楼层", value: "FLOOR|3" },
  ],
];

// 房屋配置数据
const supportingData = [
  ["衣柜", "icon-yigui"],
  ["水壶", "icon-icon-"],
  ["饮水机", "icon-icon-1"],
  ["洗衣机", "icon-icon-2"],
  ["吹风机", "icon-icon-3"],
  ["空调", "icon-icon-4"],
  ["电视", "icon-icon-5"],
  ["热水器", "icon-icon-6"],
  ["烤箱", "icon-icon-7"],
  ["冰箱", "icon-icon-8"],
  ["沙发", "icon-zhongshishafa"],
  ["洗澡", "icon-xizao"],
  ["宽带", "icon-kuandai"],
  ["天然气", "icon-tianranqi"],
  ["暖气", "icon-nuanqi"],
];

class RentAdd extends Component {
  state = {
    files: data, // 图片数据
    multiple: true, // 图片是否可以多选
    searchBarShow: true, // 是否展示搜索小区模块
    searchText: "", // 文本框输入的内容
    tipsList: [], // 搜索到的内容
    position: {}, // 当前的地理位置
    selectTip: {}, // 选择的小区信息
    houseSupporting: [], // 房屋配置信息
    rentPrice: "", // 每个月的租金
    floorSpace: "", //房屋面积
    floor: "", // 楼层
    roomTypeData: "", // 户型
    orientedData: "", // 朝向
    houseTitle: "", // 标题
    describe: "", // 描述
  };
  TimeID = null;

  componentDidMount() {
    const position = getLocalPosition();

    get("/area/community", {
      name: "",
      id: position.value,
    }).then((result) => {
      this.setState({
        position,
        tipsList: result.data.body,
      });
    });
  }
  onChange = (files, type, index) => {
    this.setState({
      files,
    });
  };

  handlerSupportingData = (value) => {
    const { houseSupporting } = this.state;

    if (houseSupporting.indexOf(value) === -1) {
      this.setState({
        houseSupporting: [value, ...houseSupporting],
      });
    } else {
      delete houseSupporting[value];

      const data = houseSupporting.filter((one) => {
        return one !== value;
      });

      this.setState({
        houseSupporting: data,
      });
    }
  };

  handleChangeImg = (files, operationType, index) => {
    console.log(files, operationType, index);
  };

  submitEvent = async () => {
    // const { files } = this.state;
    // if (files.length > 0) {
    //   let form = new FormData();
    //   files.forEach((item) => form.append("file", item.file));

    //   const imgData = await axios.post(
    //     "/houses/image",
    //     { file: form },
    //     {
    //       headers: {
    //         "": "",
    //       },
    //     }
    //   );
    //   console.log(imgData);
    // }

    const imgData =
      "https://pic1.ajkimg.com/display/xinfang/85a4758062c3f24cf5128c2994f50c95/840x563.jpg";
    const {
      searchText, // 文本框输入的内容
      tipsList, // 搜索到的内容
      getLocalPosition, // 当前的地理位置
      selectTip, // 选择的小区信息
      houseSupporting, // 房屋配置信息
      rentPrice, // 每个月的租金
      floorSpace, //房屋面积
      floor, // 楼层
      roomTypeData, // 户型
      orientedData, // 朝向
      houseTitle, // 标题
      describe, // 描述
    } = this.state;

    //     {
    //   "title": "整租 · 豪华小区 精装修出租 小区环境幽静",
    //   "description": "【装修描述】 装修简洁，家电配齐，通风采光效果良好，格局方正。",
    //   "houseImg": "img1|im2|img3",
    //   "oriented": "ORIEN|caa6f80b-b764-c2df",
    //   "supporting": "空调|洗衣机",
    //   "price": "1234",
    //   "roomType": "ROOM|ce2a5daa-811d-2f49",
    //   "size": "123",
    //   "floor": "FLOOR|1",
    //   "community": "AREA|93cbbe43-741d-de54"
    // }

    const data = {
      title: houseTitle,
      description: describe,
      houseImg: imgData,
      oriented: orientedData[0],
      supporting: houseSupporting.join("|"),
      price: rentPrice,
      roomType: roomTypeData[0],
      size: floorSpace,
      floor: floor[0],
      community: selectTip.community,
    };
    console.log(data);
    const result = await post("/user/houses", data);
    if (result.data.status === 200 || result.data.status === "200") {
      Toast.info("添加成功", 1);
      setTimeout(() => {
        this.props.history.go(-1);
      }, 1000);
    }
  };

  render() {
    const {
      files,
      searchBarShow,
      searchText,
      tipsList,
      selectTip,
      houseSupporting,
      rentPrice,
      floorSpace,
    } = this.state;

    return (
      <div className="RentAddWrapper">
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => this.props.history.go(-1)}
        >
          发布房源
        </NavBar>

        {searchBarShow ? (
          <List style={{ backgroundColor: "white" }} className="picker-list">
            <List.Item>房源信息</List.Item>
            <List.Item
              arrow="horizontal"
              extra={selectTip ? selectTip.communityName : "选择"}
              onClick={() => {
                this.setState({
                  searchBarShow: false,
                });
              }}
            >
              小区名称
            </List.Item>
            <InputItem
              placeholder="请输入租金/月"
              extra="¥/月"
              value={rentPrice}
              onChange={(value) => {
                this.setState({
                  rentPrice: value,
                });
              }}
            >
              租 金
            </InputItem>
            <InputItem
              placeholder="请输入建筑面积"
              extra="平方米"
              value={floorSpace}
              onChange={(value) => {
                this.setState({
                  floorSpace: value,
                });
              }}
            >
              建筑面积
            </InputItem>
            <Picker
              data={roomTypeData}
              title="选择户型"
              cascade={false}
              extra="请选择"
              value={this.state.roomTypeData}
              onChange={(v) => this.setState({ roomTypeData: v })}
              onOk={(v) => this.setState({ roomTypeData: v })}
            >
              <List.Item arrow="horizontal">户型</List.Item>
            </Picker>
            <Picker
              data={floorData}
              title="选择所在楼层"
              cascade={false}
              extra="请选择"
              value={this.state.floor}
              onChange={(v) => this.setState({ floor: v })}
              onOk={(v) => this.setState({ floor: v })}
            >
              <List.Item arrow="horizontal">所在楼层</List.Item>
            </Picker>
            <Picker
              data={orientedData}
              title="选择朝向"
              cascade={false}
              extra="请选择"
              value={this.state.orientedData}
              onChange={(v) => this.setState({ orientedData: v })}
              onOk={(v) => this.setState({ orientedData: v })}
            >
              <List.Item arrow="horizontal">朝向</List.Item>
            </Picker>

            <List.Item>房屋标题</List.Item>
            <TextareaItem
              rows={3}
              placeholder="请输入标题 {例如：整租 小区名 2室 5000元}"
              onChange={(v) => {
                this.setState({
                  houseTitle: v,
                });
              }}
            />
            <List.Item>房屋图像</List.Item>
            <ImagePicker
              files={files}
              onChange={this.onChange}
              onImageClick={(index, fs) => console.log(index, fs)}
              selectable={files.length < 7}
              multiple={this.state.multiple}
            />
            <List.Item>房屋配信信息</List.Item>
            <List.Item>
              <div className="content">
                <Flex wrap="wrap">
                  {supportingData.map((item) => {
                    return (
                      <div
                        className={[
                          "iconMsg",
                          houseSupporting.indexOf(item[0]) !== -1 && "active",
                        ].join(" ")}
                        onClick={() => {
                          this.handlerSupportingData(item[0]);
                        }}
                      >
                        <div className="iconSpan">
                          <span
                            className={["iconfont", item[1]].join(" ")}
                          ></span>
                        </div>
                        <div className="iconName">{item[0]}</div>
                      </div>
                    );
                  })}
                </Flex>
              </div>
            </List.Item>

            <TextareaItem title="房屋信息" autoHeight labelNumber={5} />
            <TextareaItem
              rows={3}
              placeholder="请输入具体的房屋"
              onChange={(v) => {
                this.setState({
                  describe: v,
                });
              }}
            />

            <WingBlank>
              <Flex>
                <Flex.Item>
                  <Button type="ghost">取消</Button>
                </Flex.Item>
                <Flex.Item>
                  <Button
                    type="primary"
                    onClick={() => {
                      this.submitEvent();
                    }}
                  >
                    发布
                  </Button>
                </Flex.Item>
              </Flex>
            </WingBlank>
          </List>
        ) : (
          <div>
            <SearchBar
              value={searchText}
              placeholder="请输入小区或地址名称"
              onSubmit={(value) => console.log(value, "onSubmit")}
              onCancel={() => {
                this.setState({
                  searchBarShow: true,
                });
              }}
              showCancelButton
              onChange={(value) => {
                this.handlerSearchText(value);
              }}
            />{" "}
            <div>
              {tipsList.map((one) => {
                return (
                  <div
                    style={{
                      height: "40px",
                      lineHeight: "40px",
                      marginLeft: "10px",
                      width: "100%",
                      borderBottom: "1px solid #ecf0f1",
                    }}
                    onClick={() => {
                      this.setState({
                        selectTip: one,
                        searchBarShow: true,
                      });
                    }}
                  >
                    <span>{one.communityName}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default withRouter(RentAdd);
